---
layout: single
property_name: align-items
---

<section id="align-items" class="property">
  <header class="property-header">
    <nav class="property-links">
        <a class="property-collection" href="{{site.url}}/flexbox/">
          In collection: <strong>flexbox</strong>
        </a>
      <a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</a>
        <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-items" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#align-items"><span>#</span>align-items</a>
    </h2>
    <div class="property-description">
      <p>Defines how flexbox items are aligned according to the <strong>cross</strong> axis, within a line of a flexbox container.</p>

    </div>

  </header>

    <style type="text/css">.align-items { background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content: center;padding: 0; }</style>


    <style type="text/css">.align-items .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-items .square:nth-child(2) { height: 100px; }.align-items .square:nth-child(4) { height: 75px; }.align-items .line { left: 2px;position: absolute;right: 2px; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-start;">align-items: flex-start;</code>
        </p>
        <div class="example-description">
          <p>The flexbox items are aligned at the <strong>start</strong> of the <strong>cross axis</strong>.</p>
<p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the <em>top</em>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-items " id="align-items-flex-start"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-items-flex-start{ align-items:flex-start;}</style>
        <style type="text/css">#align-items-flex-start .line { top: 0; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-end;">align-items: flex-end;</code>
        </p>
        <div class="example-description">
          <p>The flexbox items are aligned at the <strong>end</strong> of the <strong>cross axis</strong>.</p>
<p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the <em>bottom</em>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-items " id="align-items-flex-end"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-items-flex-end{ align-items:flex-end;}</style>
        <style type="text/css">#align-items-flex-end .line { bottom: 0; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: center;">align-items: center;</code>
        </p>
        <div class="example-description">
          <p>The flexbox items are aligned at the <strong>center</strong> of the <strong>cross axis</strong>.</p>
<p>By default, the cross axis is vertical. This means the flexbox items will be <strong>centered</strong> <em>vertically</em>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-items " id="align-items-center"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-items-center{ align-items:center;}</style>
        <style type="text/css">#align-items-center .line { top: 50%; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: baseline;">align-items: baseline;</code>
        </p>
        <div class="example-description">
          <p>The flexbox items are aligned at the <strong>baseline</strong> of the <strong>cross axis</strong>.</p>
<p>By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the <em>baseline</em> of their <em>text</em> align along a horizontal line.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-items " id="align-items-baseline"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-items-baseline{ align-items:baseline;}</style>
        <style type="text/css">#align-items-baseline .line { top: 55px; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: stretch;">align-items: stretch;</code>
        </p>
        <div class="example-description">
          <p>The flexbox items will stretch across the whole <strong>cross axis</strong>.</p>
<p>By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-items " id="align-items-stretch"><p class="square square--plum">1</p><p class="square square--plum">2</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-items-stretch{ align-items:stretch;}</style>
        <style type="text/css">#align-items-stretch .square { height: auto; }#align-items-stretch .square:nth-child(2) { height: auto; }#align-items-stretch .square:nth-child(4) { height: auto; }#align-items-stretch .line { display: none; }</style>
    </section>

</section>
